Azure AI Bot ServiceとAzure OpenAIを使って「生成AIチャットボット」を作ってみる – 第1回：シンプルな「オウム返し」ボットを作る

「Azure AI Bot Service」を使うと、意外と簡単にチャットボットが作れました。

#チャットボット

#Microsoft Azure

#Microsoft Teams

青柳英明

2023.11.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさん、こんにちは！
福岡オフィスの青柳です。

Microsoft Azureには「Azure AI Bot Service」というチャットボット (会話型AIボット) を作成できるサービスがあります。

今回は、この「Azure AI Bot Service」と生成AIサービス「Azure OpenAI Service」を使って、「生成AIと会話できるチャットボット」を作ってみたいと思います。

「Azure AI Bot Serviceを使うのは初めて」という方も多いと思いますので、ステップ・バイ・ステップ形式で何回かに分けて進めたいと思います。

第1回：シンプルな「オウム返し」ボットを作る ← 当記事です
- (Azure AI Bot Serviceを触ってみる)
第2回：生成AIを使って質問に回答できるようにする
- (Azure OpenAIを組み合わせてみる)
第3回：社内情報に基づいた回答ができるようにする (公開予定)
- (Cognitive Searchを使ったRAGを組み込む)

まずは、Azure AI Bot Serviceの使い方を理解するために、生成AIは使わずに、最もシンプルなチャットボットを作成することにします。

作成するのは、こちらの入力した言葉をそのまま返すだけの「オウム返し」ボットです。

作業の流れ

(1) 作業に必要な前提環境を準備する
(2) チャットボットのアプリケーションを作成する
(3) ローカル環境でアプリケーションをテストする
(4) Azure上にチャットボット実行環境を構築する
(5) Azure環境にアプリケーションをデプロイする
(6) Azureポータル画面からチャットボットをテストする
(7) Microsoft Teamsから利用できるように設定する
(8) Microsoft Teamsから利用してみる

(1) 作業に必要な前提環境を準備する

手元のPC (またはMac) に以下の環境を用意します。

Node.js
Bot Framework Emulator
Azure CLI

Node.js

Azure AI Bot Serviceで動作するアプリケーションは、Microsoftが提供する「Bot Framework SDK」を使って作成します。

Bot Framework SDKが対応しているプログラミング言語は以下の通りです：

C# (.NET Core)
JavaScript / TypeScript (Node.js)
Python (※2023年11月をもってサポート終了予定)
Java (※2023年11月をもってサポート終了予定)

今回はJavaScript (Node.js) を使ってアプリケーション作成を行いたいと思います。

Node.jsを使用するにあたって、Bot Framework SDKが用意するJavaScriptテンプレートに含まれるモジュールの互換性の都合で、Node.jsは「バージョン16」を使用します。
公式のインストーラー、あるいはnvmなどを使ってインストールしておいてください。

(私が作業した環境では「v16.20.2」を使用しました)

Bot Framework Emulator

Azure AI Bot Service向けに作成するボットアプリケーション (サーバー側アプリケーション) をローカル環境でテストするために、Microsoftが提供しているツールです。

下記リンク先から入手できますので、インストールしておいてください。

Bot Framework Emulator (Microsoft公式GitHubリポジトリ)
https://github.com/microsoft/BotFramework-Emulator

(私が作業した環境では「v4.14.1」を使用しました)

Azure CLI

Azure環境の作成は基本的にGUI (Azureポータル) から行いますが、一部でAzure CLIが必要になります。

下記リンク先でインストール方法が解説されていますので、参考にして、インストールしておいてください。

Azure CLI をインストールする方法 | Microsoft Learn
https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli

(私が作業した環境では「2.54.0」を使用しました)

(２) チャットボットのアプリケーションを作成する

アプリケーションの作成はローカル環境で行います。

前述の通り、Node.jsのバージョンが「バージョン16」であることを確認してください。

必要モジュールのインストール・最新化

npmおよびYeomanを最新化しておきます。

npm install -g npm
npm install -g yo

Yeomanジェネレーターをインストールします。 (Bot Framework SDKを使用したアプリケーションコードの雛形を作成してくれるツールです)

npm install -g generator-botbuilder

私が作業した環境では、各モジュールのバージョンは以下のようになりました。

$ npm list -g
├── generator-botbuilder@4.17.0
├── npm@8.19.4
└── yo@5.0.0

アプリケーションの作成

Yeomanジェネレーターを使ってアプリケーションコードの雛形を作成します。

yo botbuilder

ウィザード形式で必要な情報を指定していきます。今回は、全ての項目でデフォルトを選択します。

$ yo botbuilder

Welcome to the Microsoft Bot Builder generator v4.17.0.

Detailed documentation can be found at https://aka.ms/botbuilder-generator

? What's the name of your bot? → my-chat-bot
? What will your bot do? → Demonstrate the core capabilities of the Microsoft Bot Framework
? What programming language do you want to use? → JavaScript
? Which template would you like to start with? → Echo Bot - https://aka.ms/bot-template-echo
? Looking good.  Shall I go ahead and create your new bot? → Y

ジェネレーターの実行が完了すると、指定したアプリケーションの名前my-chat-botのサブディレクトリが作成されます。

実はこの時点で、作成されたアプリケーションコードの雛形はすぐに実行できるものになっています。しかし、そのまま使うというのもつまらないので、少しだけ手を加えてみましょう。

my-chat-botディレクトリへ移動します。

cd my-chat-bot

今回選択した「Echo Bot」は、最もシンプルなボットであり、こちらが入力した言葉をそのまま返す、いわゆる「オウム返し」ボットです。ボットのメイン処理はbot.jsに記述されています。

bot.jsを開いて、11行目と19行目 (ハイライトされた行) を以下のように書き換えてみてください。

11行目：ボットが応答する際のメッセージ「Echo: (こちらの入力)」→「オウム返し： (こちらの入力)」
19行目：ボットが最初に喋るメッセージ「Hello　and welcome!」→「こんにちは、ようこそ！」

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

const { ActivityHandler, MessageFactory } = require('botbuilder');

class EchoBot extends ActivityHandler {
    constructor() {
        super();
        // See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
        this.onMessage(async (context, next) => {
            const replyText = `オウム返し: ${ context.activity.text }`;
            await context.sendActivity(MessageFactory.text(replyText, replyText));
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });

        this.onMembersAdded(async (context, next) => {
            const membersAdded = context.activity.membersAdded;
            const welcomeText = 'こんにちは、ようこそ！';
            for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
                if (membersAdded[cnt].id !== context.activity.recipient.id) {
                    await context.sendActivity(MessageFactory.text(welcomeText, welcomeText));
                }
            }
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });
    }
}

module.exports.EchoBot = EchoBot;

これで、アプリケーションコードの準備は終わりです。

(3) ローカル環境でアプリケーションをテストする

作成したアプリケーションをローカル環境で実行して、「Bot Framework Emulator」を使ってテストします。

現在のディレクトリがmy-chat-botであることを確認して、以下のコマンドを実行します。

npm start

実行に成功すると、以下のようにボットアプリケーションが起動して待受状態になります。

$ npm start

> my-chat-bot@1.0.0 start
> node ./index.js

(node:40725) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)

restify listening to http://[::]:3978

Get Bot Framework Emulator: https://aka.ms/botframework-emulator

To talk to your bot, open the emulator select "Open Bot"

ここで、予めインストールしておいた「Bot Framework Emulator」を起動します。

「Open Bot」ボタンをクリックします。

「Bot URL」に以下のように入力します。

Bot URL: http://localhost:3978/api/messages

その他の項目はデフォルトのままにして、「Connect」ボタンをクリックします。

アプリケーションが正常に動作していれば、以下のようにボットの「こんにちは、ようこそ！」メッセージが表示されるはずです。

ボットに対して何か入力してみます。

このように「オウム返し」してくれれば、アプリケーションの動作確認はOKです。

テストが終わりましたら、npm startコマンドで実行したアプリケーションは「Ctrl+C」 (Macの場合は「Control+C」) で終了してください。

(4) Azure上にチャットボット実行環境を構築する

ローカル環境でのテストに成功しましたので、次は、Azure環境でボットアプリケーションを動かしてみましょう。

まずは、ボットアプリケーションの実行に必要なAzureリソースを作成します。

構築する環境は下図のようになります。

「App Service Plan」の作成

Azureポータル画面で「すべてのサービス」を開き、カテゴリ「Web & Mobile」にある「App Serviceプラン」をクリックします。

「App Serviceプラン」の画面が開きますので、上部メニューにある「作成」をクリックします。

必要な情報を入力します。

項目名		設定値
プロジェクトの詳細	サブスクリプション	リソース作成先のサブスクリプションを選択
プロジェクトの詳細	リソースグループ	リソース作成先のリソースグループを選択
App Serviceプランの詳細	名前	任意の名前を指定 (例：`kumamon-chatbot-asp`)
	オペレーティングシステム	Linux
	地域	Japan East
価格レベル	価格プラン	Basic B1
ゾーン冗長	ゾーン冗長	無効 (変更不可)

入力しましたら「確認および作成」をクリックします。

確認画面で検証に成功したことを確認して、「作成」をクリックします。

これで「App Serviceプラン」の作成は完了です。

「App Service」の作成

Azureポータル画面で「すべてのサービス」を開き、カテゴリ「Web & Mobile」にある「App Service」をクリックします。

「App Service」の画面が開きますので、上部メニューにある「作成」をクリックします。プルダウンメニューから「Webアプリ」を選択します。

必要な情報を入力します。

項目名		設定値
プロジェクトの詳細	サブスクリプション	リソース作成先のサブスクリプションを選択
プロジェクトの詳細	リソースグループ	リソース作成先のリソースグループを選択
インスタンスの詳細	名前	任意の名前を指定 (例：`kumamon-chatbot-app`)
	公開	コード
	ランタイムスタック	Node 16 LTS
	オペレーティングシステム	Linux
	地域	Japan East
価格プラン	Linuxプラン (Japan East)	前の手順で作成したApp Service Planを選択
価格プラン	価格プラン	Basic B1 (選択したApp Service Planの価格プランが表示される；変更不可)
ゾーン冗長	ゾーン冗長	無効 (変更不可)

入力しましたら「確認および作成」をクリックします。 (今回は「データベース」以降のタブは全てデフォルトのままにします)

確認画面で検証に成功したことを確認して、「作成」をクリックします。

これで「App Service」の作成は完了です。

「Bot Service」の作成

Azureポータル画面で「すべてのサービス」を開き、カテゴリ「AI & Machine Learning」にある「Bot Service」をクリックします。

「Azure AI service | ボットサービス」の画面が開きます。 (左側のメニューで「ボットサービス」が選択された状態であることを確認します)

上部メニューにある「作成」をクリックします。

「Bot Services」画面が開きます。

一番下までスクロールして「さらに読み込む」をクリックします。

「下へスクロール」「『さらに読み込む』をクリック」を繰り返します。リストに「Azure Bot」が現れますので、クリックします。

「Azure Bot」画面が開きます。

「プラン」より「Azure Bot」を選択して、「作成」をクリックします。

必要な情報を入力します。

項目名		設定値
プロジェクトの詳細	ボットハンドル	任意の名前を指定 (例：`kumamon-chatbot-bot`)
	サブスクリプション	リソース作成先のサブスクリプションを選択
	リソースグループ	リソース作成先のリソースグループを選択
	データ所在地	グローバル
価格レベル	価格プラン	Standard
Microsoft App ID	アプリの種類	ユーザー割り当て済みマネージドID
Microsoft App ID	作成の種類	新しいMicrosoftアプリIDの作成

入力しましたら「確認および作成」をクリックします。

確認画面で検証に成功したことを確認して、「作成」をクリックします。

Bot Serviceのデプロイ (作成) が行われ、完了画面が表示されます。

ここで、Bot Serviceリソースと併せて「マネージドID」というリソースが作成されていることに注目します。 (次の手順で使います)

これで「Bot Service」の作成は完了です。

「App Service」の追加作業 (「マネージドID」の設定)

前の手順で作成した「App Service」リソースの画面を開きます。

左側メニューより「ID」を選択します。

上部のタブより「ユーザー割り当て済み」タブを選択します。

上部メニューにある「追加」をクリックします。

表示されたマネージドIDの一覧より、Bot Serviceを作成した時に併せて作成された「マネージドID」を選択します。 (Bot Serviceと名前が同じものを選択します)

選択後、「追加」をクリックします。

「ユーザー割り当て済みマネージドID」の一覧画面に戻りますので、追加したマネージドIDが表示されていることを確認します。

「App Service」の追加作業 (「構成」の設定)

「App Service」リソースの画面で、左側メニューより「構成」を選択します。

今から、この画面で設定を行なっていきます。 (画面は閉じずにこのままにしておきます)

Webブラウザの別のウィンドウまたはタブで、前の手順で作成した「Bot Service」リソースの画面を開きます。

左側メニューより「構成」を選択します。

この画面に表示されている「値」を参照して、App Serviceの「構成」画面で設定を行います。

App Serviceリソースの「構成」画面に戻り、「アプリケーション設定」のメニューにある「新しいアプリケーション設定」をクリックします。

「名前」と「値」の組を入力して、「OK」で保存します。

名前	値
MicrosoftAppType	Bot Service「構成」画面の「ボットタイプ」の値 (固定値「UserAssignedMSI」)
MicrosoftAppId	Bot Service「構成」画面の「Microsoft App Id」の値 (XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 形式)
MicrosoftAppTenantId	Bot Service「構成」画面の「アプリテナントID」の値 (XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 形式)

「新しいアプリケーション設定」の操作を繰り返して、合計3つの属性を設定します。

3つの属性が設定されたことを確認します。

上部メニューの「保存」をクリックします。

確認メッセージが表示されます。 (設定を変更するとアプリケーションの再起動が行われる旨が書かれています)

「続行」をクリックします。

「Bot Service」の追加作業 (「構成」の設定)

「App Service」リソースの画面で、左側メニューより「構成」を選択します。

画面右側にある「規定のドメイン名」に表示されているドメイン名 (XXXXXXXX.azurewebsites.net) をクリップボードにコピーしておきます。

「Bot Service」リソースの画面に移動して、左側メニューより「構成」を選択します。

「メッセージングエンドポイント」に以下のようにURLを入力します。

項目名	設定値
メッセージングエンドポイント	https://＜App Serviceのドメイン名＞/api/messages (https://XXXXXXXX.azurewebsites.net/api/messages)

入力後、一番下にある「適用」をクリックします。

(5) Azure環境にアプリケーションをデプロイする

構築したAzure環境に対して、ステップ(2)〜(3)で作成したアプリケーションをデプロイします。デプロイは、ローカル環境でAzure CLIを使って行います。

まず、アプリケーションのディレクトリ (エントリポイントであるindex.jsが存在するディレクトリ) へ移動します。

cd my-chat-bot

アプリケーション資産の一式をzipで圧縮します。圧縮対象のディレクトリ、zipファイルを生成するディレクトリを間違えないようにしてください。

圧縮対象のディレクトリ：カレントディレクトリ
zipファイルを生成するディレクトリ：親ディレクトリ

zip -r ../deploy.zip .

圧縮が終わったら、1つ親のディレクトリ (作成されたzipファイルが存在するディレクトリ) へ移動します。

cd ..

App Service (Webアプリ) のアプリケーションをデプロイするAzure CLIコマンドを実行します。

「リソースグループ名」「App Service (Webアプリ) の名前」は、皆さんの環境に合わせて入力してください。

az webapp deployment source config-zip --resource-group "＜リソースグループ名＞" --name "＜App Service (Webアプリ) の名前＞" --src ./deploy.zip

コマンドを実行しましたら、デプロイが正常に開始されることを確認します。

$ az webapp deployment source config-zip --resource-group "resourcegroup" --name "kumamon-chatbot-app" --src ./deploy.zip
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202

ステータスコード「202」(HTTP Accept) が表示されていれば、デプロイ開始しています。

ここからしばらく時間がかかりますので待ちます。 (特に、初回のデプロイは時間がかかるようです)

デプロイが完了すると、結果が表示されます。

{
  "active": true,
  "author": "N/A",
  "author_email": "N/A",
  "build_summary": {
    "errors": [],
    "warnings": []
  },
  "complete": true,
  ・・・
  (中略)
  ・・・
}

エラーが表示されていないことを確認します。

Azureポータルの「App Service」リソース画面でデプロイの履歴を確認することもできます。

左側メニューより「デプロイセンター」を選択して、上部のタグより「ログ」タグを選択します。